<template>
  <div class="lcds-root-container">
    <div>
      <div>
        <lc-rower> </lc-rower>
      </div>
      <div
        class="lc-buttonGroup lc-buttonGroup__level lc-buttonGroup__center"
        style="justify-content: center"
      >
        <el-button
          class="lc-button"
          type="primary"
          @click="handleClickStepsToNext"
        >
          下一步
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, provide, inject, ref } from "vue";

defineOptions({
  name: "StepsPanel01",
});

const emit = defineEmits(["stepsToNext"]);

const forms = {};

provide("collectStepFormInstance", (name, formVm) => {
  forms[name] = formVm;
});

const collectStepPanel = inject("collectStepPanel", () => void 0);

const handleClickStepsToNext = () => {
  emit("stepsToNext");
};

const resetForm = () => {
  Object.keys(forms).forEach((key) => {
    const formVm = forms[key];
    formVm && formVm.value.resetFields();
  });
};

onMounted(() => {
  collectStepPanel({
    resetForm,
  });
});
</script>
